<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#total {
				display: flex;
				flex-direction: column;
			}

			#logo {
				position: relative;
				top: 30px;
			}

			#top {
				margin: auto;
				width: 1200px;
				position: relative;

			}

			#top1 {
				width: 1200px;
				height: 20px;
				position: absolute;
				display: flex;
				flex-direction: row;
				top:30px;
				right: 0;
				 
				margin-bottom: 5px;
			}

			#top1 #icon {
				position: absolute;
				top: -10px;
				right: 230px;
				z-index: 2;
			}

			#top1 #list1 {
				width: 300px;
				list-style: none;
				display: flex;
				flex-direction: row;
				position: absolute;
				right: 0;
				top: 0;
				background-color: #EAFFFA;
				line-height: 25px;
				height: 25px;
				justify-content: space-around;
			}

			#top2 {
				position: relative;
			}

			#top #list2 {
				width: 1200px;
				list-style: none;
				display: flex;
				flex-direction: row;
				position: absolute;
				top: 10px;
				background-color: #FE6915;
				line-height: 40px;
				height: 40px;
				justify-content: space-around;
				
			}

			#banner {
				position: absolute;
				top: 135px;
				width: 1200px;
				margin: auto;
			}

			#bang {
				border: 1px solid greenyellow;
				display: flex;
				flex-direction: row;
				width: 1200px;
				position: relative;
				margin: auto;
				top: 220px;
				padding-top: 50px;
			}

			#p1 {
				position: absolute;
				left: -10px;
				top: 0;

			}

			#b1 {
				width: 700px;
			}

			#b1,
			#b2,
			#b3 {
				position: relative;
				display: flex;
				flex-direction: row;
				padding-bottom: 20px;
			}

			#sign1 {
				position: absolute;
				left: 30px;
				z-index: 2;

			}

			#book1 {
				position: relative;
				top: -5px;
			}

			#sign2 {
				position: absolute;
				z-index: 2;

			}

			#book2 {
				position: relative;
				top: 5px;
			}

			#sign3 {
				position: absolute;
				z-index: 2;

			}

			#book3 {
				position: relative;
				top: 5px;
			}

			.jieshao {
				color:#1D68B4;
				font-size: 18px;
			}

			.price {
				color: red;
				font-weight: bold;
			}

			.discount {
				color: #5FA694;
			}

			#bottomp {
				text-align: center;
				position: relative;
				top: 200px;
				color: gray;
			}
			#bottomp img{
				position: relative;
				top: 15px;
			}
		</style>
	</head>
	<body>
		<div id="total">
			<div id="top">
				<img id="logo" src="logo.jpg">
				<div id="top1">
					<img id="icon" src="icon_count.png" />
					<ul id="list1">
						<li>尾品汇</li>
						<li>当当优品</li>
						<li>数字馆</li>
						<li>都看阅器</li>
					</ul>
				</div>
				<div id="top2">
					<ul id="list2">
						<li>首页</li>
						<li>图书</li>
						<li>音像 </li>
						<li>童装 </li>
						<li>服装 </li>
						<li>鞋靴 </li>
						<li>运动 </li>
						<li>箱包 </li>
						<li>美妆 </li>
						<li>珠宝 </li>
						<li>家居 </li>
						<li>食品 </li>
						<li>酒 </li>
						<li>手机 </li>
						<li>数码 </li>
						<li>电脑 </li>
						<li>家电</li>
					</ul>
				</div>
				<img id="banner" src="banner.png">

			</div>
			<div id="bang">
				<img id="p1" src="bg_bang.gif" />
				<div id="b1">
					<div class="b11">
						<img id="sign1" src="bookNo1.gif" />
						<img id="book1" src="book-01.jpg" />
					</div>
					<div class="b12">
						<p class="jieshao">偷影子的人 </p>
						<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
						<p>出版社：湖南文艺出版社</p>
						<p>当当价：<span class="price">￥ 17.90</span></p>
						<p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
							一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
					</div>
				</div>
				<div id="b4">
					<div id="b2">
						<div class="b11">
							<img id="sign2" src="bookNo2.gif" />
							<img id="book2" src="book-02.jpg">
						</div>
						<div class="b12">
							<p class="jieshao">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </p>
							<p>作 者：柴静 著</p>
							<p>出版社：广西师范大学出版社</p>
							<p class="price">￥ 29.40 <span class="discount">7.4折</span></p>
						</div>
					</div>
					<div id="b3">
						<div class="b11">
							<img id="sign3" src="bookNo3.gif" alt="">
							<img id="book3" src="book-03.jpg" alt="">
						</div>
						<div class="b12">
							<p class="jieshao">改变孩子先改变自己</p>
							<p>作 者：贾容韬 贾毅 著</p>
							<p>出版社：作家出版社</p>
							<p class="price">￥ 22.20 <span class="discount">7.4折</span></p>
						</div>
					</div>
				</div>
			</div>
			<div id="bottom">
				<p id="bottomp">Copyright (C) 当当网 2004-2017, All Rights Reserved<img
						src="validate.gif" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
			</div>
		</div>
	</body>
</html>
